<template>
  <div class="test-form">
    <parser :key="key2" :form-conf="formConf" @submit="viewData" />

    <!-- 测试运行的返回结果 -->
    <el-dialog :visible.sync="runDialog.open" :title="runDialog.title" width="40%">
      <pre>{{ JSON.stringify(runDialog.json, null, 4) }}</pre>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitData">确认提交</el-button>
        <el-button @click="runDialog.open = false">关闭</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
    //import Parser from '../Parser'
    // 若parser是通过安装npm方式集成到项目中的，使用此行引入
    import Parser from 'form-gen-parser'
    import {getDef} from "@/api/openform/generator";
    import {getDataById, saveData} from "@/api/openform/formdata";

    export default {
        components: {
            Parser
        },
        props: {},
        data() {
            return {
                key2: +new Date(),
                runDialog: {//测试运行弹出框
                    open: false
                    , title: "数据预览"
                    , json: "{}"
                },
                formId: null,
                dataId: null,
                formDef: null,
                formData: null,
                formConf: {
                    "fields": [
                    ],
                    "formRef": "elForm",
                    "formModel": "formData",
                    "size": "min",
                    "labelPosition": "right",
                    "labelWidth": 100,
                    "formRules": "rules",
                    "gutter": 15,
                    "disabled": false,
                    "span": 24,
                    "formBtns": true
                }
            }
        },
        computed: {},
        watch: {},
        created() {},
        mounted() {
            this.formId = this.$route.params && this.$route.params.formId;
            this.dataId = this.$route.params && this.$route.params.dataId;
            getDef(this.formId).then(res => {
                if(res.data){
                    this.key2 = +new Date();//key必须有所变化
                    this.formConf = JSON.parse(res.data.json);
                    //this.fillFormData(this.formConf, {})
                    this.formDef = res.data;
                }else{
                    this.$message.warning("表单："+this.formId+"不存在");
                }
                if(this.dataId) {
                    return getDataById(res.data.formKey, this.dataId);
                }
            }).then(res => {
                if(!res || !res.data){
                    return;
                }
                this.fillFormData(this.formConf, res.data);//加载数据
                this.key2 = +new Date();//刷新表单
                this.formData = res.data;
                return this;
            });
        },
        methods: {
            fillFormData(form, data) {
                form.fields.forEach(item => {
                    const val = data[item.__vModel__]
                    if (val) {
                        item.__config__.defaultValue = val
                    }
                })
            },
            viewData(data) {
                this.runDialog.json = data;
                this.runDialog.open = true;
            },
            submitData() {
                saveData(this.formDef.formKey, this.runDialog.json, this.dataId).then(() => {
                    this.msgSuccess("保存成功");
                    this.closeSelectedTag();
                });
            },
            closeSelectedTag() {
                let view = this.$router.currentRoute;
                this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
                    if (this.isActive(view)) {
                        this.toLastView(visitedViews, view)
                    }
                });
            },
            isActive(route) {
                return route.path === this.$route.path
            },
            toLastView(visitedViews, view) {
                const latestView = visitedViews.slice(-1)[0]
                if (latestView) {
                    this.$router.push(latestView.fullPath)
                } else {
                    // now the default is to redirect to the home page if there is no tags-view,
                    // you can adjust it according to your needs.
                    if (view.name === 'Dashboard') {
                        // to reload home page
                        this.$router.replace({ path: '/redirect' + view.fullPath })
                    } else {
                        this.$router.push('/')
                    }
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
  .test-form {
    margin-top: 10px;
    margin-left: 10px;
    width: 800px;
    padding: 10px;
  }
</style>
© 2021 GitHub, Inc.
